ShowTable of Contents
Part 1 Size to fit Screen
A new task has emerged, i need to make an internal crm database accessible to mobile phones. Since the iPhone is supported for Traveler 8.5.1, i decided to focus on this platform and the inherent capabilities it provides.
First i had allot of trouble getting things sized right for the screen, and then there was zooming issues. I finally discovered a way to help format the page correctly and disable zooming.
In the source view of the Xpage, go to the top and under the tag enter this tag in
1:
2:
3: <meta name="viewport" content="width=320;
4:
5: initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
6:
7:
It only affects the iPhone Safari and displays in its full size on all other browsers.
Other good news was the iPhone automatically turned the phone numbers into links. I made the email address a “mailto:” link, and that opens an iPhone email very fast without leaving Safari.
Tomorrow i will show how i got the iPhone Google maps application to map this address, and also map directions from your current location to the destination address.
And no, its not slow at all, and i don't have 3G.
Part 2 More formatting
In my last post i showed how to size the screen and disable zooming, but things were still a little small. In particular the view spacing was not that finger friendly, also it looked a little akward with the page having padding around the table, and the fonts were too small.
Here is what is looked like
To solve the view spacing issue, i added this code to my style sheet to change the height of the rows.
2:
3: .xspDataTable tbody tr td {
4:
5: border-top:1px solid #E8E8E9;
6:
7: font-weight:normal;
8:
9: height:45px;
10:
11: vertical-align:middle;
12:
13: }
This changes the line height to 45 pixels(i also changed the font to Arial 14), much more finger friendly than 20px. Here is what it looks like now
I then took away all the page padding to get a better look, increased font size, and added this script to hide the address bar on load
addEventListener('load', function() {
setTimeout(hideAddressBar, 0);
2: }, false);
3:
4: function hideAddressBar() {
5: window.scrollTo(0, 1);
6: }
I also created a custom view pager and increased the font size to 14, and made all row heights 45px, here is the result
Part 3 Make it Look Like a Native App
The first thing you need to do to make your Xpage application look like a native iPhone app is to put all the parts(view, form, etc.) into 1 Xpage. I did this with two panels, one is hidden while the other is showing. In the first panel, which is set to display:none by default, is the contact form. The other panel which is visible by default is the view and search function.
Configure the links in the view to set the document(data source for the contact panel) to the universal docid by using the columns onClick event on the events tab. Set it to partial update the contact panel to receive the information from the document data source. On the client side js in the onClick event, set the panel with the search view in it to display:none, then set the contact panel to display:block.
Then create a back button on the contact form that hides the contact panel, and displays the search view panel.
The reason you need to put everything on one page and use Ajax refresh is because of the next step, also it is much much faster then changing pages. Add this meta tag to the Xpage.
When a user bookmarks a your web page with this meta tag on the iPhone home screen, it will open in its own safari app process, it will not show the location bar or the bottom nav bar. If you click on a link to another web page it will open it in a normal Safari window and take you away from the app, ruining your appearance of it being a native app.
Another meta tag that really makes a difference is:
This will set the top bar with “ATT and time” to be black when the app is opened.
Now we want a custom icon on the iPhone home page, and a startup image too. For this we add two links:
/icon.png” />
/startup.png" />
Notice the CRM app icon on the desktop, then look at the startup “splash screen” image.
The start up image comes up immediately, then waits for your page to open. I suggest making your own Domcfg.nsf login form using the ultralite login subform as a start, then make the buttons and fields allot bigger. i also found out that sometimes this replaces the iPhone home icon with the ultralight login image, so fix that as well, every app will have to have a custom login form. I also added the ability to remember the password, not just the username. You can search the web to find the correct dimensions for these pictures.
All that is left is to put in some nice webkit transitions when you hide and then display the panels. I like to first fade out the current panel, after the fade out has occurred - set it to display:none, Set the next panel to display:block, then fade that panel in. Most of this can be done with CSS, i will blog on this later. You can also do the card flip or any webkit transition you would like.
Video Example Application
Here is an Example of what you can end up with following these steps
Author: Mark Hughes